import React from 'react'
import { Card, Row, Col, Statistic } from 'antd'
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons'

const AnalyticsPage: React.FC = () => {
  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">数据分析</h1>

      <Row gutter={[16, 16]} className="mb-6">
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="总用户数"
              value={1128}
              precision={0}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
              suffix="人"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="日活跃用户"
              value={93}
              precision={0}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
              suffix="人"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="生成文章数"
              value={9280}
              precision={0}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="API调用次数"
              value={45623}
              precision={0}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]}>
        <Col xs={24} lg={16}>
          <Card title="使用趋势">
            <div className="h-64 flex items-center justify-center text-gray-500">
              图表区域（需要集成图表库）
            </div>
          </Card>
        </Col>
        <Col xs={24} lg={8}>
          <Card title="热门模板">
            <div className="space-y-2">
              <div className="flex justify-between">
                <span>新闻报道</span>
                <span className="text-gray-500">234次</span>
              </div>
              <div className="flex justify-between">
                <span>产品描述</span>
                <span className="text-gray-500">189次</span>
              </div>
              <div className="flex justify-between">
                <span>博客文章</span>
                <span className="text-gray-500">156次</span>
              </div>
              <div className="flex justify-between">
                <span>技术文档</span>
                <span className="text-gray-500">123次</span>
              </div>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default AnalyticsPage